<template>
	<view class="content">
		<!-- 自定义导航小程序以及H5平台出现的代码 -->
		<!-- #ifdef MP || H5 -->
		<view class="top_list" :style="{ height :(navBarHeight) + (statusBarHeight) +'px' }">
			<view :style="{height:statusBarHeight + 'px'}">

			</view>
			<view :style="{height:navBarHeight + 'px', width: menuLeftInfo + 'px'}" class="list_top">
				<view class="list_top_01">
					<view>本地时间：{{time1}}</view>
				</view>
			</view>
		</view>
		<!-- #endif -->



		<!-- 仅出现在App平台的代码 -->
		<!-- #ifdef APP-PLUS -->
		<view style="height: 100rpx; width: 100%;">

		</view>
		<!-- #endif -->

		<!-- #ifdef MP || H5 -->

		<view class="bottom_list" :style="{height:'calc(100% - '+((navBarHeight + statusBarHeight) +'px')+')'}">
			<view class="bottom_list_01">
				<view>
					<image src="../../static/酒店.png"></image>
					<view>五星艾特酒店欢迎您</view>
				</view>
			</view>
			<view class="bottom_list_02">
				<div class="home-banner-box">
					<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
						:interval="interval" :duration="duration">
						<swiper-item v-for="(item,index) in swiper_list" key="item">
							<image :src="item.picUrl"></image>
						</swiper-item>
					</swiper>
				</div>
				<div class="homt-banner-box_01">
					<div class="homt-banner-box_01_01">正在疯狂的查询您的订单，请耐心等待......</div>
					<div class="homt-banner-box_01_02">
						<div class="homt-banner-box_01_02_01">
							<div class="homt-banner-box_01_02_01_01">
								在读取中请勿移动身份证
							</div>
							<image class="homt-banner-box_01_02_01_img" src="../../static/身份证正面.png"></image>
							<div class="homt-banner-box_01_02_01_01">
								请按图所示
							</div>
							<div class="homt-banner-box_01_02_01_01">
								【居民身份证】放置在对应位置
							</div>
							<div class="homt-banner-box_01_02_01_01">
								进行订单查询
							</div>
						</div>
					</div>
				</div>
			</view>
			<view class="bottom_list_03">
				<div class="bottom_shou">
					<button @click="shou">
						首页
						<span class="span">({{miao}}秒)</span>
					</button>
				</div>
				<div class="bottom_list_03_01">
					<text>某某公司</text>
					<text>版本V1.0 TID：xxx Tel：021-00000000</text>
				</div>

			</view>
		</view>
		<!-- #endif -->
		<!-- #ifdef APP-PLUS -->
		<view class="bottom_list">
			<view class="bottom_list_01">
				<view>
					<image src="../../static/酒店.png"></image>
					<view>五星艾特酒店欢迎您</view>
				</view>
			</view>
			<view class="bottom_list_02">
				<div class="home-banner-box">
					<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
						:interval="interval" :duration="duration">
						<swiper-item v-for="(item,index) in swiper_list" key="item">
							<image :src="item.picUrl"></image>
						</swiper-item>
					</swiper>
				</div>
				<div class="homt-banner-box_01">
					<div class="homt-banner-box_01_01">请对准摄像头......</div>
					<div class="homt-banner-box_01_02">
						<div class="homt-banner-box_01_02_01">
							<div class="homt-banner-box_01_02_01_01">
								提示：戴眼镜的客人请“摘下眼睛”进行人脸识别
							</div>
							<image class="homt-banner-box_01_02_01_img" :src="imgs">
							</image>
							<div class="homt-banner-box_01_02_01_01">
								帅哥/美女、您好！
							</div>
							<div class="homt-banner-box_01_02_01_01">
								请面对摄像头进行人脸比对
							</div>
						</div>
					</div>
				</div>
			</view>
			<view class="bottom_list_03">
				<div class="bottom_shou">
					<button @click="shou">
						首页
						<span class="span">({{miao}}秒)</span>
					</button>
				</div>
				<div class="bottom_list_03_01">
					<text>某某公司</text>
					<text>版本V1.0 TID：xxx Tel：021-00000000</text>
				</div>

			</view>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	import {
		pathToBase64,
		base64ToPath
	} from 'image-tools'
	import Base64 from 'base-64'
	export default {
		data() {
			return {
				statusBarHeight: 0, //状态栏的高度
				windowWidth: 0, //可视区域的宽
				menuButtonInfo: 0, //胶囊的位置
				navBarHeight: 0, //顶部整体高度
				menuLeftInfo: 0, //胶囊左边的距离
				time1: "",
				swiper_list: [],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				miao: 60,
				from: {},
				imgs: 'https://img1.baidu.com/it/u=4099270419,231018976&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800',
				imgs_01:"",
				str:"",//穿过来的身份证base64编码
				imgs_id_01: '' ,//第一个图片的id
				imgs_id_02:''//第二个图片的id
			}
		},
		onLoad(options) {
			if(options.from){
				this.from=JSON.parse(options.from)
			}
			if(options.imgs_id_01){
				this.imgs_id_01=options.imgs_id_01
			}
		},
		created() {
			// #ifdef  MP || H5
			uni.getSystemInfo({
				success: (res) => {
					this.statusBarHeight = res.statusBarHeight
					this.windowWidth = res.windowWidth
					const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
					this.navBarHeight = (menuButtonInfo.bottom - this.statusBarHeight) + (menuButtonInfo.top -
						this.statusBarHeight)
					this.menuLeftInfo = menuButtonInfo.left
				}
			})
			// #endif
			this.time_data()
			this.switch_data()
			this.tiao_show()
			this.takePhoto()
			console.log(this.from)
		},
		methods: {
			// 实时获取当前时间
			time_data() {
				setInterval(() => {
					let myDate = new Date()
					let myYear = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
					let myMonth = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
					let myToday = myDate.getDate(); //获取当前日(1-31)
					myMonth = myMonth > 9 ? myMonth : '0' + myMonth
					myToday = myToday > 9 ? myToday : '0' + myToday
					let hours = myDate.getHours();
					let minutes = myDate.getMinutes();
					let seconds = myDate.getSeconds();
					hours = hours > 9 ? hours : '0' + hours
					minutes = minutes > 9 ? minutes : '0' + minutes
					seconds = seconds > 9 ? seconds : '0' + seconds
					let nowDate = `${myYear}-${myMonth}-${myToday} ${hours}:${minutes}:${seconds}`
					this.time1 = nowDate
				}, 1000)
			},
			// 30秒后跳转到首页
			tiao_show() {
				this.contime = setInterval(() => {
					this.miao--

				}, 1000)
			},
			shou() {
				uni.navigateTo({
					url: '/pages/index/index'
				})
			},
			// 调用摄像头
			takePhoto() {
				var that = this
				uni.chooseImage({
					count: 6, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //album 从相册选图，camera 使用相机
					success: (res) => {
						const tempFilePaths = res.tempFilePaths;
						pathToBase64(tempFilePaths[0])
							.then(base64 => {
								let data = base64.substring(base64.indexOf(',') + 1)
								that.imgs = res.tempFilePaths[0];
								let url = res.tempFiles[0];
								uni.request({
									url: `http://api.eyekey.com/face/Check/checking?app_id=b2623b0e8bb34fe9bdb5fc8e924a2a48&app_key=b224b3db6d90480395383607a4d838b3`,
									method: "POST",
									header: {
										"Content-Type": "application/x-www-form-urlencoded",
									},
									data: {
										img: data
									},
									success(res) {
										that.imgs_id_02=res.data.face[0].face_id
										// 两个人脸对比
										uni.request({
											url:`http://api.eyekey.com/face/Match/match_compare?app_id=b2623b0e8bb34fe9bdb5fc8e924a2a48&app_key=b224b3db6d90480395383607a4d838b3&face_id1=${that.imgs_id_01}&face_id2=${that.imgs_id_02}`,
											method:"GET",
											header:{
												'Accept': '*/*',
												'Accept-Encoding': 'gzip, deflate',
												'Accept-Language': 'zh-CN,zh;q=0.9',
												'Connection': 'keep-alive',
												'Host': 'api.eyekey.com'
											},
											success(res) {
												let achievement=res.data.similarity
												console.log(achievement,"对比结果")
												if(achievement>=70){
													console.log("跳转页面")
													uni.navigateTo({
														url:"/pages/indent/indent"
													})
												}
												else{
													console.log("请您确保是同一人操作")
													uni.navigateTo({
														url:"/pages/index/index"
													})
												}
											}
										})
									},
									fail() {
										console.log('调用失败')
									}
								})
							})
							.catch(error => {
								console.error(error)
							})
					}
				})
			},
			// 获取轮播图的接口
			switch_data() {
				uni.request({
					url: "https://api.it120.cc/f54bf8db20a8d381608eaca044440d26/banner/list",
					method: "GET",
					success: (res) => {
						if (res.data.code === 0) {
							this.swiper_list = res.data.data
						} else {

						}

					},
					fail(err) {
						console.log(err);
					}
				})
			}
		}
	}
</script>

<style lang="less">
	page {
		width: 100%;
		height: 100%;
	}

	swiper {
		height: 90% !important;
		width: 90% !important;
		margin: auto;

		swiper-item {
			image {
				width: 100%;
				height: 100%;
			}
		}
	}


	.content {
		width: 100%;
		height: 100%;

		.top_list {
			background-color: #823835;

			.list_top {
				display: flex;
				justify-content: center;
				align-items: center;
				color: #ddd38c;

				.list_top_01 {
					font-size: 25rpx;
					width: 100%;

					view {
						margin-left: 40rpx;
					}
				}
			}
		}
	}

	.bottom_list {
		width: 100%;
		height: 90%;
		overflow: auto;
		background-color: #f3f6f6;

		.bottom_list_01 {
			width: 100%;
			height: 150rpx;
			margin-top: 50rpx;
			// display: flex;
			// flex-direction: column;
			// justify-content: center;

			image {
				width: 60rpx;
				height: 60rpx;
				border: 8rpx solid transparent;
				border-radius: 50%;
				padding: 10rpx;
				background-clip: padding-box, border-box;
				background-origin: padding-box, border-box;
				background-image: linear-gradient(to right, #ffffff, #fff), linear-gradient(to right, #cd9e29, #8aa484);
			}

			view {
				text-align: center;
				font-size: 28rpx;
				color: #985054;
			}
		}

		.bottom_list_02 {
			width: 75%;
			height: 70%;
			margin: auto;
			margin-top: 40rpx;
			background-color: #fff;
			border: 5rpx solid #c9ba83;

			// border:5rpx solid #c9ba83;
			.home-banner-box {
				width: 100%;
				height: 30%;
				background-color: #fff;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
			}

			.homt-banner-box_01 {
				width: 100%;
				height: 66%;
				margin-top: 7%;

				.homt-banner-box_01_01 {
					font-size: 23rpx;
					text-align: center;
					width: 100%;
					height: 5%;
				}

				.homt-banner-box_01_02 {
					width: 80%;
					margin: auto;
					height: 80%;
					margin-top: 8%;
					border: 1px dashed red;
					border-radius: 20rpx;

					.homt-banner-box_01_02_01 {
						width: 70%;
						height: 100%;
						margin: auto;
						overflow: auto;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;

						.homt-banner-box_01_02_01_01 {
							font-size: 20rpx;
							text-align: center;
							margin-top: 20rpx;
							margin-bottom: 40rpx;
						}

						.homt-banner-box_01_02_01_img {
							width: 300rpx;
							height: 200rpx;
							border: 2px solid;
						}
					}
				}
			}
		}

		.bottom_list_03 {
			position: absolute;
			bottom: 0;
			height: 160rpx;
			width: 100%;
			color: #fff;
			background-color: black;

			.bottom_shou {
				height: 50%;
				width: 100%;
				background-color: #f3f6f6;
				position: relative;

				button {
					width: 220rpx;
					height: 70rpx;
					position: absolute;
					top: 0;
					right: 50rpx;
					border-radius: 20rpx;
					background-color: #72312e;
					color: #fff;
					text-align: center;
					font-size: 28rpx;

					.span {
						color: #ffff66;
					}
				}

			}

			.bottom_list_03_01 {
				height: 50%;
				width: 90%;
				margin: auto;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				font-size: 20rpx;
			}
		}
	}
</style>
